<template>
  <div class="my-ranklist">
    <mt-header title="排行榜">
      <c-router-back slot="left"></c-router-back>
    </mt-header>
    <div class="my-rank">
      <div class="my-rank-text">
        <div class="my-rank-score">680 <small class="mt5">我的得分</small></div>
        <div class="my-rank-text2">
          <img class="my-img mb5" src="../assets/imgs/zuck.jpg" alt="">
          <div class="my-name mb5">超级管理员</div>
          <small>已击败70%的学生</small>
        </div>
        <div class="my-rank-num">13<small class="mt10">总分排名</small></div>
      </div>
    </div>
    <div class="my-rank-list p15">
      <rank-list></rank-list>
      <div class="rank-list">
        <div class="user-wrap clearfix bbi my-rankdetail">
          <span class="rank-num">
            14
          </span>
          <img class="user-img mr20" src="../assets/imgs/zuck.jpg">
          <div>
            <div class="user-name">我</div>
            <div class="user-area mt5">地区：未知地区</div>
          </div>
          <div class="user-score">720<small> 分</small></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import RankList from '../components/ranklist.vue'
  export default {
    data () {
      return {}
    },
    components: {
      RankList
    }
  }
</script>

<style lang="less" rel="stylesheet/less">
  @import '../assets/less/_mixins-wln.less';
  .my-ranklist{
    .my-rank{
      background: url('../assets/imgs/rank-bg.png') 0 0 no-repeat;
      background-size: 100%;
      background-color: #fff;
      padding-top: 44px;
      .my-rank-text{
        width: 94%;
        height: 90px;
        border-radius: 10px;
        background-color: #fff;
        margin: 0 auto;
        box-shadow: 0 3px 10px #d0f5ff;
        position: relative;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .my-rank-score,.my-rank-num{
          font-size: 27px;
          display: flex;
          align-items: center;
          flex-direction: column;
          color: #00aff0;
          small{
            font-size: 11px;
            color: #94999d;
          }
        }
        .my-rank-num{
          color: #ffc100;
        }
        .my-rank-text2{
          text-align: center;
          margin-top: -45px;
          .my-img{
            width: 70px;
            height: 70px;
            border-radius: 35px;
          }
          .my-name{
            font-size: 12px;
            color: #4d565d;
          }
          small{
            font-size: 10px;
            color: #94999d;
          }
        }
      }
    }
    .my-rank-list{
      background-color: #fff;
      .my-rankdetail{
        .user-score,.user-name,.user-area{
          color: #f2510e;
          small{
            color: #f2510e;
          }
        }
      }
    }
  }
</style>
